<template>
   <div>
      <!-- 功能 -->
        <div class="fun">
            <img  :src="require('@/assets/function/Photo.png')" class="icon">
            <img  :src="require('@/assets/function/Record.png')" class="icon">
        </div>
        <!-- 框 -->
        <div class="frame overflow-auto">
          <textarea   v-model="message" maxlength="150" @keydown="beforePress"/>  
        </div>  
        <!-- 发送 -->
        <div class="send flex">
            <div id="buttonBox">
                 <el-button  class="button flex" icon="el-icon-position"  v-if="SendState"  @click="SendMessage_()" >发送</el-button>
                 <el-button  class="button flex"   v-else  >{{count}}秒恢复</el-button>
            </div>
        </div>
   </div>
</template>
<script>
import { uuid } from 'vue-uuid';
import { mapActions, mapState } from 'vuex';
  export default 
  {
     name :'', 
     data() {
        return {
            message:'',
            SendState:true,
            tips:'空内容',
            timer:null,
            count:3
        }
     },
     computed:{
        ...mapState('Chat',['ChatNow']),
        ...mapState('Login',['User']),
     },
     methods:{
        ...mapActions('Chat',['SendMessage']),
        timing(){ //计时
          this.SendState =false
          clearInterval(this.timer)
          this.count= 3

          this.timer=setInterval(() => {
              this.count-=1
            if(this.count<=0)
            {          
                this.count= 3
                clearInterval(this.timer)
                this.SendState =true
            }
          }, 1000);
        },
        //按下按钮
      beforePress(event){
         if (event.altKey && event.keyCode == 13) { //Alt+Enter换行
             this.message = this.message + '\n'
             event.preventDefault(); // 阻止浏览器默认换行操作
         }

        else  if (event?.keyCode === 13) {
             this.SendMessage_()
             event.preventDefault(); // 阻止浏览器默认换行操作
          }
      },
       async SendMessage_(){
          if(this.count != 3 || ! this.SendState) {
             this.timing()
             return this.$message.error('请勿频繁发送')
          }
           if(this.message == '') return this.$message.error('消息内容为空')
         try{ 
            
            let uid =this.ChatNow.uid  //发送人ID
            let touid=this.ChatNow.touid //被发送人ID
            let username = this.User.username //发送人名字
            let headphoto=this.User.headphoto //发送人头像
            let id=uuid.v1() + uid +'->' + touid //数据库ID
            let content =this.message //内容
            
            let type = 1 //类型 1:普通文字
            let createdtime=this.$public.getCurrentDetailTime() //发送时间
            let flag = this.$public.OverTime(this.ChatNow.beforetime,createdtime,5*60*1000)?3:1 //比较超过五分钟 1:不带聊天时间 3:带聊天时间
            let state=0 //发送状态 0:开始 1:发送成功 2:发送失败
            this.message=''
            
            // content = this.$public.getContent(content,'style="width:100%;text-align:left"')
            let res =await this.SendMessage({id,state,uid,touid,content,type,username,headphoto,createdtime,flag})
            if(res.code !=200)this.$message.error(res.message)
         }catch(error){this.$message.error(error)}
         
          this.timing()
        }
     },
  }
</script>
<style scoped lang='less'>
.icon{
    width: 30px;
    height: 30px;
    margin-right: 5px;
}
// 功能
.fun{
    width: 100%;
}
// 发送
.send{
   width: 100%;
   justify-content: flex-end;
   height: 30px;
   overflow: hidden;
   #buttonBox{
      width: 80px;
      height: 30px;
      position: relative;
      border-radius: 5px;
   }
   .button{
      width: 80px;
      height: 30px;
      position: relative;
      border-radius: 5px;
      border: 0;
      padding: 0;
      width: 100%;
      height: 100%;
      color: white;
      background: var(--GeneralBackColor);
   }
}

//框
.frame{
    box-sizing: border-box;
    width: 100%;
    margin:5px 0;
}
textarea{
  width: 100%;
  height: 90px;
  font-size: 18px;
}
</style>